<template>
    <div class="user">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">用户管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <div style="margin-top: 15px;margin-bottom: 15px">
            <el-input placeholder="请输入内容" v-model="search" @keydown.native.enter='userSearch' class="input-with-select search-input">
                <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
            <el-button type="primary" @click='showAddDialog'>添加</el-button>
        </div>
        <el-table
            :data="userList"
            border
            style="width: 100%;margin-bottom:15px">
            <el-table-column
            type="index"
            width="50">
            </el-table-column>
            <el-table-column
            prop="username"
            label="姓名"
            width="180">
            </el-table-column>
            <el-table-column
            prop="email"
            label="邮箱"
            width="180">
            </el-table-column>
            <el-table-column
            prop="mobile"
            label="电话">
            </el-table-column>
            <el-table-column label="开关" width="100px">
                <template slot-scope="scope">
                    <el-switch
                    v-model="scope.row.mg_state"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    @change='changeUserSta(scope.row)'>
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" plain @click="showEditDialog(scope.row)">编辑</el-button>
                    <el-button type="primary" icon="el-icon-delete" plain @click="showDelDialog(scope.row)">删除</el-button>
                    <el-button type="primary" icon="el-icon-check" plain @click="showGrantDialog(scope.row)">角色分配</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="1"
            :page-sizes="[10, 20, 30, 40]"
            :page-size= 'pagesize'
            layout="total, sizes, prev, pager, next, jumper"
            style="background-color:#F5F5F5"
            :total="total">
        </el-pagination>
        <el-dialog title="添加用户" :visible.sync="addDialogFormVisible">
            <el-form :model="addUserForm" :rules='rules' label-width="100px" ref='addUserForm'>
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="addUserForm.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="addUserForm.password"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="addUserForm.email"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="mobile">
                        <el-input v-model="addUserForm.mobile"></el-input>
                    </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addUserSubmit('addUserForm')">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="编辑" :visible.sync="editDialogFormVisible">
                <el-form :model="editUserForm" :rules='rules' label-width="100px" ref='editUserForm'>
                        <el-form-item label="用户名" prop="username" >
                            <el-input v-model="editUserForm.username" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="editUserForm.email"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号" prop="mobile">
                            <el-input v-model="editUserForm.mobile"></el-input>
                        </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addDialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="editUserSubmit('editUserForm')">确 定</el-button>
                </div>
        </el-dialog>
        <el-dialog
            title="删除提示"
            :visible.sync="delDialogVisible"
            width="30%"
            :before-close="handleClose">
            <span>确定要删除id是{{delUserForm.id}}的这条数据吗?</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="delUserSubmit(delUserForm.id)">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="角色授权" :visible.sync="grantDialogFormVisible">
                <el-form :model="grantForm"  label-width="100px" ref='grantForm'>
                        <el-form-item label="用户名" prop="username" >
                            <el-input v-model="grantForm.username" style="width:80px" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="角 色">
                            <el-select v-model="grantForm.rid" placeholder="请选择">
                              <el-option
                                v-for="item in roleList"
                                :key="item.id"
                                :label="item.roleName"
                                :value="item.id">
                              </el-option>
                            </el-select>
                        </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="grantDialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="grantUserSubmit">确 定</el-button>
                </div>
        </el-dialog>
    </div>
</template>

<script>
import { getUserList, addUsers, editUsers, deleteUsers, getRolesList, grantUser, changeStatus } from '@/api/login.js'
export default {
  data () {
    return {
      userList: [],
      roleList: [],
      value2: '',
      //   mg_state: '',
      total: 0,
      pagesize: 10,
      pagenum: 1,
      search: '',
      addDialogFormVisible: false,
      editDialogFormVisible: false,
      delDialogVisible: false,
      grantDialogFormVisible: false,
      addUserForm: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      editUserForm: {
        username: '',
        email: '',
        mobile: '',
        id: ''
      },
      delUserForm: {
        id: ''
      },
      grantForm: {
        id: '',
        rid: '',
        username: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: 'blur,change'
          }
        ],
        mobile: [{ required: true, message: '电话不能为空' }]
      }
    }
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pagesize = val
      this.getList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.pagenum = val
      this.getList()
    },
    getList () {
      getUserList({
        params: {
          query: this.search,
          pagenum: this.pagenum,
          pagesize: this.pagesize
        }
      }).then(result => {
        console.log(result.data)
        this.userList = result.data.users
        this.mg_state = result.data.mg_state
        this.total = result.data.total
      })
    },
    userSearch () {
      this.getList()
    },
    showAddDialog () {
      this.addDialogFormVisible = true
    },
    addUserSubmit (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 实现数据的新增
          addUsers(this.addUserForm).then(res => {
            console.log(res)
            if (res.meta.status === 201) {
              this.$message({
                type: 'success',
                message: res.meta.msg
              })
              this.addDialogFormVisible = false
              this.getList()
              this.addUserForm = {
                username: '',
                password: '',
                email: '',
                mobile: ''
              }
            } else {
              this.$message({
                type: 'warning',
                message: res.meta.msg
              })
            }
          })
        } else {
          this.$message({
            type: 'warning',
            message: '数据输入不合法'
          })
        }
      })
    },
    showEditDialog (row) {
      this.editUserForm.username = row.username
      this.editUserForm.email = row.email
      this.editUserForm.mobile = row.mobile
      this.editUserForm.id = row.id
      this.editDialogFormVisible = true
    },
    editUserSubmit (formName) {
      console.log(this.$refs[formName])
      this.$refs[formName].validate(valid => {
        if (valid) {
          editUsers(this.editUserForm).then(res => {
            console.log(res)
            if (res.meta.status === 200) {
              this.$message({
                type: 'success',
                message: res.meta.msg
              })
              this.getList()
              this.editDialogFormVisible = false
            } else {
              this.$message({
                type: 'warning',
                message: res.meta.msg
              })
            }
          })
        } else {
          this.$message({
            type: 'warning',
            message: '数据输入不合法'
          })
        }
      })
    },
    showDelDialog (row) {
      this.delUserForm.id = row.id
      this.delDialogVisible = true
    },
    delUserSubmit (id) {
      deleteUsers(id).then(res => {
        console.log(res)
        if (res.meta.status === 200) {
          this.$message({
            type: 'success',
            message: res.meta.msg
          })
          this.getList()
          this.delDialogVisible = false
        } else {
          this.$message({
            type: 'warning',
            message: res.meta.msg
          })
        }
      })
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    showGrantDialog (row) {
      this.grantDialogFormVisible = true
      this.grantForm.id = row.id
      this.grantForm.username = row.username
      getRolesList()
        .then((res) => {
          // console.log(res)
          this.roleList = res.data
        })
    },
    grantUserSubmit () {
      if (!this.grantForm.rid) {
        this.$message({
          type: 'warning',
          message: '请先选择角色，否则无法提交'
        })
        return
      }
      grantUser(this.grantForm)
        .then((res) => {
          console.log(res) // 200
          if (res.meta.status === 200) {
            this.$message({
              type: 'success',
              message: res.meta.msg
            })
            this.getList()
            this.grantDialogFormVisible = false
          } else {
            this.$message({
              type: 'warning',
              message: res.meta.msg
            })
          }
        })
    },
    changeUserSta (row) {
      changeStatus({uid: row.id, type: row.mg_state})
        .then((res) => {
          if (res.meta.status === 200) {
            this.$message({
              type: 'success',
              message: res.meta.msg
            })
            this.getList()
          } else {
            this.$message({
              type: 'warning',
              message: res.meta.msg
            })
          }
        })
    }
  },
  mounted () {
    this.handleSizeChange(this.pagesize)
  }
}
</script>

<style lang="scss" scoped>
.user {
  .search-input {
    width: 300px;
  }
}
</style>
